<template>
  <section class="todoapp">
    <!-- 头部部分 -->
   <TodoHeader @addTask="hAddTask"></TodoHeader>
   <TodoMain 
   :list="showList"
   @getId="doDel"
   @changeDone="hChangeDone" >
   </TodoMain>
   <TodoFooter 
   @changeType="hChangeType" 
   @clearDone="hClearDone" 
   :list="showList"></TodoFooter>

    <!-- 主体部分 -->
    
  </section>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoFooter from './components/TodoFooter.vue'
import TodoMain from './components/TodoMain.vue'
export default {
  components: {   
    TodoHeader,TodoMain,TodoFooter },
    data () {
  return {
    // list: 
    list:JSON.parse(localStorage.getItem('list') || '[]'),
    type:'all'
  }
},
methods: {
  doDel(id) {
 const index = this.list.findIndex(item => item.id === id)
 this.list.splice(index,1)

  },
  hChangeDone(id) {
    // console.log(id);
 const obj = this.list.find(item => item.id === id)
  obj.isDone = !obj.isDone
  },
  hAddTask(taskname) {
    // console.log(taskname);
    this.list.push(
      {name:taskname,
      id:Date.now(),
      isDone:false
      }
    )

  },
  hClearDone() {
  this.list = this.list.filter(item => !item.isDone)
  
  },
  hChangeType(type) {
    // console.log(type);
    this.type = type
  }
},
computed: {
  showList() {
    if(this.type === 'all' )  {
      return this.list
    } else if (this.type === 'active') {
 return this.list.filter(item => !item.isDone)
    } else if( this.type === 'completed') {
      return this.list.filter(item => item.isDone)
    }
  }
},
watch: {
  list: {
    deep:true,
    handler(){
      localStorage.setItem('list',JSON.stringify(this.list))
    }
  }
}

}
</script>

<style></style>
